<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-09 21:19:16
 * @LastEditTime: 2024-06-15 14:04:44
 * @FilePath: \env-manager-pc\src\views\data_query\declare\declartion.vue
-->
<script setup lang="ts">
import { ElInput, ElOption, type FormInstance } from 'element-plus'
import type { InspectForm } from './page'
import { rules, useInitDeclareForm } from './page'
import useUserStore from '@/store/modules/user'
import useEntStore from '@/store/modules/ent'
import { ModelType } from '@/types/common'

const emits = defineEmits(['submit'])
const userStore = useUserStore()
const entStore = useEntStore()
const dialogVisible = ref(false)
const { formData, initForm } = useInitDeclareForm()
const formRef = ref<FormInstance>()
const btnLoading = ref(false)
const modelType = ref(ModelType.add)
const tempRowData = ref<InspectForm>({} as InspectForm)
const Reuses = userStore.isEnterpris ? entStore.Reuses : []
const fileRef = ref()

function open(options: any) {
  modelType.value = options.type
  if (options.data) {
    tempRowData.value = { ...options.data as InspectForm }
    formData.value = { ...options.data as any }
  }
  dialogVisible.value = true
}

function doLoading(flag: boolean) {
  btnLoading.value = flag
}

function submit() {
  formRef.value?.validate((vaild) => {
    if (vaild) {
      emits('submit', formData.value, doLoading)
    }
  })
}

function close() {
  dialogVisible.value = false
  btnLoading.value = false
  initForm()
}

function upload(data: any) {
  fileRef.value.submit(data)
}

defineExpose({
  open,
  close,
  upload,
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    title="检修申报"
    width="80%"
    top="1%"
    draggable
    @closed="close"
  >
    <div class="max-h-[65vh] w-full overflow-x-hidden overflow-y-auto">
      <ElForm ref="formRef" label-width="180px" label-suffix="：" :model="formData" :rules="rules">
        <ElRow :gutter="30">
          <ElCol :span="12">
            <ElFormItem label="企业名称" prop="EntName">
              {{ formData.EntName }}
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="治理设施" prop="ReuseName">
              <ElSelect v-model="formData.ReuseObjID">
                <ElOption v-for="item in Reuses" :key="item.ObjID" :label="item.Name" :value="item.ObjID" />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="申报理由" prop="ReportContent">
              <ElInput v-model="formData.ReportContent" type="textarea" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="相关附件" prop="Files">
              <DeclearFileUpload :id="formData.DeclareID" ref="fileRef" :notip="false" :files="formData.Files" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="检修开始时间" prop="StartTime">
              <el-date-picker
                v-model="formData.StartTime"
                type="datetime"
                class="w-full!"
                value-format="YYYY-MM-DD HH:mm"
                placeholder="请选择检修开始时间"
                time-format="HH:mm"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="检修结束时间" prop="EndTime">
              <el-date-picker
                v-model="formData.EndTime"
                class="w-full!"
                value-format="YYYY-MM-DD HH:mm"
                type="datetime"
                placeholder="请选择检修开始时间"
                time-format="HH:mm"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="申报人" prop="ReportName">
              <ElInput v-model="formData.ReportName" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="联系电话" prop="ReportTel">
              <ElInput v-model="formData.ReportTel" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="submit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
